<!-- 工作量统计 -->
<template>
  <div class="mod-config">
    <el-button-group style="margin-bottom: 10px;">
      <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
      <el-button type="default" icon="el-icon-delete" @click="searchReset">清空</el-button>
    </el-button-group>
      <el-form inline label-width="60px">
        <el-form-item label="学年">
          <el-date-picker v-model="dataForm.createTimeStart" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
          至
          <el-date-picker v-model="dataForm.createTimeEnd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <div class="avue-crud">
        <el-table :data="dataList" border v-loading="dataListLoading" show-summary  :summary-method="getSummaries">
          <el-table-column prop="deptName" label="部门名称">
            <template slot-scope="scope">
              <el-button type="text" @click="checkWorkNumByDept(scope.row)">{{scope.row.deptName}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="jinShiNum" label="近视监测">
            <template slot-scope="scope">
              <el-button type="text" @click="checkWorkNumByDept(scope.row)">{{scope.row.jinShiNum}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="dangAnNum" label="屈光档案">
            <template slot-scope="scope">
              <el-button type="text" @click="checkWorkNumByDept(scope.row)">{{scope.row.dangAnNum}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="jiaoSuCCNum" label="角塑初查">
            <template slot-scope="scope">
              <el-button type="text" @click="checkWorkNumByDept(scope.row)">{{scope.row.jiaoSuCCNum}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="jiaoSuFCNum" label="角塑复查">
            <template slot-scope="scope">
              <el-button type="text" @click="checkWorkNumByDept(scope.row)">{{scope.row.jiaoSuFCNum}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="total" label="合计">
            <template slot-scope="scope">
              <el-button type="text" @click="checkWorkNumByDept(scope.row)">{{scope.row.total}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    <check-dept v-if="deptNumVisible" ref="workNumDialog"></check-dept>
  </div>
</template>

<script>
  import { filterParams } from '@/util/tools'

  import { mapGetters } from 'vuex'

  import { remote } from '@/api/admin/dict'
  import { getDeptInfo } from '@/api/admin/dept'
  import { checkWorkNum, checkWorkNumByUser } from '@/api/pvm/prevention/statistic_workload'

  import CheckDept from './dept_worknum'

  export default {
    data() {
      return {
        dataForm: {
          createTimeStart: '',
          createTimeEnd: ''
        },
        dataList: [],
        dataListLoading: false,
        deptNumVisible: false
      }
    },
    components: {
      CheckDept
    },
    created() {
      this.getNowDate()
      this.getDataList()
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    methods: {
      getNowDate(){
        var d = new Date()
        let year = d.getFullYear()
        let month = d.getMonth() + 1
        let day = d.getDate()
        let str = year + '-' + ((month < 10) ? '0'+ month : month) + '-' + ((day < 10) ? '0'+ day : day)
        this.dataForm.createTimeStart = str
        this.dataForm.createTimeEnd = str
      },
      // 获取数据列表
      getDataList(data) {
        this.dataListLoading = true
        checkWorkNum(this.dataForm).then(response => {
          console.log(response.data.data)
          let responseData = response.data.data
          responseData.forEach(item => {
            item.total = parseFloat(item.jinShiNum) + parseFloat(item.dangAnNum) + parseFloat(item.jiaoSuCCNum) + parseFloat(item.jiaoSuFCNum)
          })
          this.dataList = responseData
        })
        this.dataListLoading = false
      },
      searchHandle() {
        this.pageIndex = 1;
        this.getDataList()
      },
      // 搜索清空
      searchReset() {
        for(let item in this.dataForm){
          this.dataForm[item] = ''
        }
      },
      // 刷新回调
      refreshChange() {
        this.getDataList()
      },
      // 查询部门人员工作量统计
      checkWorkNumByDept(row){
        this.deptNumVisible = true
        let data = {
          deptId: row.deptId,
          deptName: row.deptName,
          createTimeStart: this.dataForm.createTimeStart,
          createTimeEnd: this.dataForm.createTimeEnd
        }
        this.$nextTick(() => {
          this.$refs.workNumDialog.init(data)
        })
      },
      //  合计
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if(index == 0){
            sums[index] = '总计'
            return
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0)
          }
        });
        return sums;
      },
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .el-col {
    margin-bottom: 0 !important;
  }
  /deep/ .el-input__prefix {
    display: none!important;
  }
  /deep/ .el-table {
  display: flex;
  flex-direction: column;
  }

  /deep/ .el-table__body-wrapper {
  order: 1;
  }
  .text-left {
    text-align: left!important;
  }
  .miui-table {
    width: 100%;
    margin: 10px 0;
    background-color: #b1e2ec3b;
    tr th {
      background-color: #f4f5f7;
    }

    tr th, tr td {
      padding: 10px 8px;
      border: solid 1px #fff;
      text-align: center;
    }
    .miui-table-header td{
      background-color: #7898a8;
      color: #fff;
    }
    .miui-table-tbody{
      background-color: #cadee8;
    }
    .miui-table-label {
      width: 80px;
      background-color: #b2d5f6;
    }

  }
</style>
